<!--修改登录手机号-->
<template>
  <div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="修改登录手机号">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"  class="password-retrieval-form" style="width: 900px;">
          <div class="input-info">
            <a-form-model-item label="当前登录手机号" :colon="false">
              <span style="color: #333333">{{ phone }}</span>
            </a-form-model-item>
            <a-form-model-item label="修改登录手机号" prop="newPhone" :colon="false">
              <a-input v-model="form.newPhone"  placeholder="输入手机号" type="text" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 16, offset: 4 }">
              <a-button type="primary" @click="addCategory" v-preventReClick>保存</a-button>
              <a-button type="default" class="mLeft" @click="canale">取消</a-button>
            </a-form-model-item>

          </div>
        </a-form-model>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import { postAction } from '@/api/manage';
import { LoginUserInfo } from "@/api/setting";
import { numberFilter } from '@/utils/util'
export default {
  name: 'modifyLoginMobile',
  data(){
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      form:{},
      rules: {
        newPhone:[
          { required: true , message: '请输入手机号!' },
          { validator: this.validatePhone }
        ],
      },
      phone: null,
    }
  },
  mounted() {
    this.getUserInfo();
  },
  methods:{
    //保存
    addCategory(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let params = { };
          params. newPhone = this.form.newPhone;
          // params. bizId = 203612;  //企业ID或渠道ID或第三方平台ID
          params. bizType = 2;   //业务类型 1-企业 2-渠道 3-第三方
          postAction('/zx/usermgr/updateLoginPhone',params).then(res => {
            if (res.success){
              this.$message.success('保存成功');
              this.form.newPhone = '';
              this.getUserInfo();
            }else{
              this.$message.warning(res.message);
            }
          })

        }
      })
    },
    //取消
    canale(){
      this.$router.back();
    },
    getUserInfo(){
      LoginUserInfo().then(res => {
        if (res.success) {
          let data = res.result;
          if (data){
            this.phone = numberFilter(data.phone,'mobileCard');
          }
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    // 校验手机号
    validatePhone(rule,value,callback){
      let reg = /^(1\d{10})$/;
      if (!reg.test(value)){
        callback("您的手机号码格式不正确!");
      }else{
        callback()
      }
    },
  }

}
</script>

<style scoped lang="less">
.breadcrumb{
  background:#fff;
  height: 60px;
  line-height: 30px;
  color: #101010;
  font-weight: bold;
}
.tips{
  color: #AEAEB2;
  font-size: 14px;
  white-space: nowrap;
}
/deep/.ant-tabs{
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background: #FFFFFF;
}

.password-retrieval-form{
  width: 100%;
  background: #FFFFFF;
  padding-top: 20px;
  text-align: left;
  .title{
    text-indent: 4em;
    padding: 20px 0;
  }
}

.ant-input{
  width: 40%;
}
</style>

